import { memo, Fragment, useId } from "react";
import { SFields, SCard } from "@cnjingx/antd-components";
import { NTable } from "@/components";
import {
  ratingColumns,
  creditTipsColumns,
  creditData,
  recoursedColumns,
  recoursedData,
  BadDebtsColumns,
  BadDebtsData,
  DelinquentColumns,
  DelinquentData,
  NonRevolvingLoansColumns,
  NonRevolvingLoansData,
  CreditCardInfoColumns,
  CreditCardInfoData,
  SubCreditCardInfoColumns,
  SubCreditCardInfoData
} from "./config";
import styles from "../../index.module.css";
import "./index.css"; // 合并单元格样式

const InfoSummary = (props) => {
  const { loading, ratingItems = [] } = props;
  const key = useId();
  return (
    <>
      <div className={styles.title} style={{ marginTop: "16px" }}>
        信息概要
      </div>
      <SCard
        className={styles.mgn16}
        configs={{ title: "评分信息" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          columns={ratingColumns}
          dataSource={ratingItems}
          pagination={{ hideOnSinglePage: true }}
        />
      </SCard>

      <SCard
        className={styles.mgn16}
        configs={{ title: "信贷交易信息提示" }}
        loading={loading}
        isShowExtra={false}
      >
        <div className="cusTableContainer">
          <NTable
            columns={creditTipsColumns}
            dataSource={creditData}
            pagination={{ hideOnSinglePage: true }}
            bordered
            summary={(pageData) => {
              const sum = pageData.reduce((res, cur) => {
                return res + cur.age;
              }, 0);
              return (
                <NTable.Summary.Row>
                  <NTable.Summary.Cell
                    index={0}
                    colSpan={2}
                    className="noBorderRight"
                  >
                    <div className={styles.textCt}>合计</div>
                  </NTable.Summary.Cell>
                  <NTable.Summary.Cell
                    index={1}
                    className={`noBorderRight ${styles.textCt}`}
                  >
                    {sum}
                  </NTable.Summary.Cell>
                  <NTable.Summary.Cell index={2}>
                    <div className={styles.textCt}>---</div>
                  </NTable.Summary.Cell>
                </NTable.Summary.Row>
              );
            }}
          />
        </div>
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "被追偿信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <div className="cusTableContainer">
          <NTable
            columns={recoursedColumns}
            dataSource={recoursedData}
            pagination={{ hideOnSinglePage: true }}
            bordered
            summary={(pageData) => {
              let sum = 0;
              let amountSum = 0;
              pageData.forEach((item) => {
                sum += item.age;
                amountSum += item.amount;
              });

              return (
                <NTable.Summary.Row>
                  <NTable.Summary.Cell index={0} className="noBorderRight">
                    <div className={styles.textCt}>合计</div>
                  </NTable.Summary.Cell>
                  <NTable.Summary.Cell
                    index={1}
                    className={`noBorderRight ${styles.textCt}`}
                  >
                    {sum}
                  </NTable.Summary.Cell>
                  <NTable.Summary.Cell index={2}>
                    <div className={styles.textCt}>{amountSum}</div>
                  </NTable.Summary.Cell>
                </NTable.Summary.Row>
              );
            }}
          />
        </div>
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "呆账信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"prop1"}
          columns={BadDebtsColumns}
          dataSource={BadDebtsData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "逾期（透支）信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={DelinquentColumns}
          dataSource={DelinquentData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "非循环贷账户信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={NonRevolvingLoansColumns}
          dataSource={NonRevolvingLoansData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "循环额度下分账户信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={NonRevolvingLoansColumns}
          dataSource={NonRevolvingLoansData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "循环贷账户信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={NonRevolvingLoansColumns}
          dataSource={NonRevolvingLoansData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "贷记卡账户信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={CreditCardInfoColumns}
          dataSource={CreditCardInfoData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
      <SCard
        className={styles.mgn16}
        configs={{ title: "准贷记卡账户信息汇总" }}
        loading={loading}
        isShowExtra={false}
      >
        <NTable
          rowKey={"key1"}
          columns={SubCreditCardInfoColumns}
          dataSource={SubCreditCardInfoData}
          pagination={{ hideOnSinglePage: true }}
          bordered
        />
      </SCard>
    </>
  );
};

export default memo(InfoSummary);
